<template>
  <div id="center">
     <div class="center-img-wrap">
        <div style="">
            <img :src="specialColumn.columnLogo" class="center-img">
        </div>
     </div>
    <card>
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-l vux-1px-r">
          <div style="padding: 3px;">1130</div>
          <div style="padding: 3px;">订阅人数</div>
        </div>
        <div style="height: 36px;line-height: 36px;" class="vux-1px-r">
          <a class="m-bar" v-if="!isSubscribe" @click="show=true">订阅</a>
          <a class="m-bar" v-if="isSubscribe" @click="showUnSbr=true">取消订阅</a>
        </div>
      </div>
    </card>
    <div>
      <scroller style="top: 210px"
        ref="columnContentScroller"
        :on-refresh="refreshColumnContent"
        :on-infinite="infiniteColumnContent">
        <group>
          <cell v-for="(item, index) in columnContentItems" :key="index" 
            :title="item.columnContentTitle" 
            :link="{ path: '/specialColumn/columnContentDetail', query: { id: item.id }}">
          </cell>
        </group>
      </scroller>
    </div>
    
    <div v-transfer-dom>
      <confirm v-model="show"
      title="订阅专栏"
      @on-cancel="onCancel"
      @on-confirm="onConfirm"
      @on-show="onShow"
      @on-hide="onHide">
        <p style="text-align:center;">您确定订阅该专栏?</p>
      </confirm>
    </div>
    <toast v-model="showToast" @on-hide="onHideToast">订阅成功</toast>

    <div v-transfer-dom>
      <confirm v-model="showUnSbr"
      title="取消订阅专栏"
      @on-cancel="onCancelUnSbr"
      @on-confirm="onConfirmUnSbr"
      @on-show="onShowUnSbr"
      @on-hide="onHideUnSbr">
        <p style="text-align:center;">您确定取消订阅该专栏?</p>
      </confirm>
    </div>
    <toast v-model="showToastUnSbr" @on-hide="onHideToastUnSbr">取消订阅成功</toast>
  </div>
</template>

<script>
import { Confirm, Card, Group, Cell, Toast, TransferDomDirective as TransferDom } from 'vux'
import { getCustomerId } from '../utils/utils'
import { getAuthInfo } from '../utils/common'
import { getShareParamsInit } from '../utils/wxJsSdkUtils'

export default {
  directives: {
    TransferDom
  },
  components: {
    Card,
    Confirm,
    Group,
    Cell,
    Toast
  },
  data () {
    return {
      show: false,
      showUnSbr: false,
      showToast: false,
      showToastUnSbr: false,
      noData: '',
      currentPage: '0',
      specialColumnId: '',
      columnContentItems: [],
      specialColumn: '',
      isSubscribe: false,
      customerId: getCustomerId()
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  created: function () {
    getAuthInfo('specialColumn/columnContentList')
  },
  mounted () {
    console.log('mounted')
    console.log(this.$router.currentRoute.query.id)
    this.specialColumnId = this.$router.currentRoute.query.id
    let path = this.$router.history.current.path
    if (path === '/specialColumn/columnContentList') {
      console.log('路径是一个specialColumn/columnContentList')
    }
    console.log(this.$router.currentRoute.query.customerId)
    let customerIdV = this.$router.currentRoute.query.customerId
    if (customerIdV !== undefined) {
      this.customerId = customerIdV
      window.localStorage.setItem('customerId', this.customerId)
      console.log(window.localStorage.getItem('customerId'))
    }

    getShareParamsInit(path, this.customerId, this.specialColumnId, '棱镜社-忠于未知，活出理想', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510586585372&di=4475bbebad8646dde24b6ebf24c8db3e&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201209%2F25%2F20120925232033_HSZCS.jpeg', '读别人的故事，体会百味人生')

    this.top = 1
    this.bottom = 10
  },
  methods: {
    onCancel () {
      console.log('on cancel')
    },
    onConfirm (msg) {
      let self = this
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'customerId': this.customerId,
          'specialColumnId': this.specialColumnId
        },
        responseType: 'json',
        method: 'post'
      }
      this.$ajax('api/cms/specialColumns/subscribe', config).then(function (response) {
        console.log(response)
        var data = response.data
        if (data.status === '200') {
          self.isSubscribe = true
          self.showToast = true
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    onHide () {
      console.log('on hide')
    },
    onHideToast () {
      console.log('on onHideToast')
    },
    onShow () {
      console.log('on show')
    },
    onCancelUnSbr () {
      console.log('on cancel')
    },
    onConfirmUnSbr (msg) {
      let self = this
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'customerId': this.customerId,
          'currentPage': self.currentPage,
          'specialColumnId': this.specialColumnId
        },
        responseType: 'json',
        method: 'post'
      }
      this.$ajax('api/cms/specialColumns/unsubscribe', config).then(function (response) {
        console.log(response)
        var data = response.data
        if (data.status === '200') {
          self.isSubscribe = false
          self.showToastUnSbr = true
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    onHideUnSbr () {
      console.log('on hide')
    },
    onHideToastUnSbr () {
      console.log('on onHideToast')
    },
    onShowUnSbr () {
      console.log('on show')
    },
    refreshColumnContent (done) {
      console.log('refreshColumnContent')
      var self = this
      this.noData = true
      setTimeout(() => {
        self.columnContentItems = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': this.customerId,
            'currentPage': '0',
            'pageSize': '10',
            'specialColumnId': self.specialColumnId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/specialColumns/contents', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.length)
          console.log(response.data.pagination.currentPage)
          self.currentPage = response.data.pagination.currentPage + 1
          var columnContents = response.data.data.columnContents
          var start = columnContents.length
          for (var i = 0; i < start; i++) {
            self.columnContentItems.push(columnContents[i])
          }
          self.bottom = self.bottom + 10
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteColumnContent (done) {
      console.log('infiniteColumnContent')
      var self = this
      if (this.noData) {
        console.log(this.noData)
        this.noData = false
        self.$refs.columnContentScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': this.customerId,
            'currentPage': self.currentPage,
            'pageSize': '10',
            'specialColumnId': self.specialColumnId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/specialColumns/contents', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.currentPage = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.noData = '没有更多数据'
            self.$refs.columnContentScroller.finishInfinite(true)
            return
          }
          var columnContents = response.data.data.columnContents
          self.specialColumn = response.data.data.specialColumn
          var isSub = response.data.data.isSubscribe
          console.log(isSub === '0')
          if (isSub === '0') {
            self.isSubscribe = true
          }
          var start = columnContents.length
          for (var i = 0; i < start; i++) {
            self.columnContentItems.push(columnContents[i])
          }
          self.bottom = self.bottom + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.center-img-wrap{
    width:100%;
    height:150px;
    display:block;
    background-color: #10c5b6;
    
}

.center-img{
    width: 100%;
    height: 150px;
    display: block;
    margin: 0 auto;
}

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

.m-bar {
    color: #999999;
    border-color: #999999;
    border-radius: 4px;
    border: 1px solid;
    padding: 5px 20px 5px 20px;
    cursor:pointer;
}
</style>
